import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HelloEorld from '../components/HelloWorld.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Helloworld',
    component: HelloEorld,
    meta: { title: "首页" }
  },
  {
    path: '/mock',
    name: 'mock',
    meta: { title: "Mock" },
    component: () => import(/* webpackChunkName: "about" */ '@/views/mock/index.vue')
  },
  {
    path: '/login',
    name: 'login',
    meta: { title: "登陆页",hidden: true },
    component: () => import(/* webpackChunkName: "about" */ '@/views/login/index.vue')
  },
  {
    path: '/fabric',
    name: 'fabric',
    meta: { title: "fabric" },
    children: [
      {
        path: 'base',
        name: 'base',
        meta: { title: "基础" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/fabric/index.vue')
      },
      {
        path: 'createRect',
        name: 'createRect',
        meta: { title: "绘制矩形" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/fabric/createRect.vue')
      },
      {
        path: 'demo1',
        name: 'fabric-demo1',
        meta: { title: "demo1" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/fabric/demo1.vue')
      },
      {
        path: 'demo2',
        name: 'fabric-demo2',
        meta: { title: "polyline(变形)_1" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/fabric/demo2.vue')
      },
      {
        path: 'demo3',
        name: 'fabric-demo3',
        meta: { title: "polyline(变形)_2" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/fabric/demo3.vue')
      },
    ]
  },
  {
    path: '/echart',
    name: 'echart',
    meta: { title: "Echarts" },
    children: [
      {
        path: 'line',
        name: 'line',
        meta: { title: "Line-折线图" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/echart/line/index.vue')
      },
      {
        path: 'time-line',
        name: 'time-line',
        meta: { title: "Line-time型横轴" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/echart/line/time-line.vue')
      },
    ]
  },
  {
    path: '/threejs',
    name: 'threejs',
    meta: { title: "threeJs" },
    children: [
      {
        path: 'index',
        name: 'threejs-index',
        meta: { title: "几何体" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/threeJS/index/index.vue')
      },
      {
        path: 'shader',
        name: 'threejs-shader',
        meta: { title: "海面" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/threeJS/shader/index.vue')
      },
      {
        path: 'point-cloud',
        name: 'point-cloud',
        meta: { title: "点云" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/threeJS/point-cloud.vue')
      },
      {
        path: '3d-city',
        name: '3d-city',
        meta: { title: "3D城市" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/threeJS/3d-city.vue')
      },
      {
        path: 'planet',
        name: 'threejs-planet',
        meta: { title: "星球" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/threeJS/planet/index.vue')
      },
      {
        path: 'light-poetry',
        name: 'threejs-light-poetry',
        meta: { title: "光与影之诗" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/threeJS/light-poetry/index.vue')
      },
      {
        path: "granary",
        name: "three-granary",
        meta: { title: "3D粮仓基地" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/threeJS/granary/index.vue')
      },
      {
        path: "label",
        name: "three-label",
        meta: { title: "标签" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/threeJS/label/index.vue')
      },
      {
        path: "flame",
        name: "three-flame",
        meta: { title: "火焰" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/threeJS/flame/index.vue')
      },
      {
        path: "map",
        name: "three-map",
        meta: { title: "3D地图可视化" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/threeJS/map/index.vue')
      },
      {
        path: "line",
        name: "three-line",
        meta: { title: "飞线" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/threeJS/line/index.vue')
      },
      {
        path: "line2",
        name: "three-line2",
        meta: { title: "飞线(加粗)" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/threeJS/line2/index.vue')
      },
      {
        path: "line3",
        name: "three-line3",
        meta: { title: "飞线(着色器)" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/threeJS/line3/index.vue')
      },
    ]
  }, {
    path: '/cesium',
    name: 'cesium',
    meta: { title: "cesium" },
    children: [
      {
        path: 'index',
        name: 'cesium-index',
        meta: { title: "实战" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/cesium/index.vue')
      }
    ]
  },
  {
    path: '/svg',
    name: 'svg',
    meta: { title: "Svg" },
    children: [
      {
        path: 'index',
        name: 'svg-index',
        meta: { title: "基础" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/svg/index.vue')
      },
      {
        path: 'property',
        name: 'svg-property',
        meta: { title: "Stroke 属性" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/svg/property.vue')
      },
      {
        path: 'filter',
        name: 'svg-filter',
        meta: { title: "滤镜" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/svg/filter.vue')
      },
      {
        path: 'editor',
        name: 'svg-editor',
        meta: { title: "在线编辑器" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/svg/online.vue')
      },
      {
        path: 'svgjs',
        name: 'svg-svgjs',
        meta: { title: "svg.js" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/svg/svgjs/index.vue')
      },
    ]
  },
  {
    path: '/d3',
    name: 'd3',
    meta: { title: "D3.js" },
    component: () => import(/* webpackChunkName: "about" */ '@/views/d3/index.vue')
  },
  {
    path: '/debounce',
    name: 'debounce',
    meta: { title: "防抖/节流" },
    component: () => import(/* webpackChunkName: "about" */ '@/views/debounce/index.vue')
  },
  {
    path: '/tween',
    name: 'tween.js',
    meta: { title: "tween.js" },
    children: [
      {
        path: 'index',
        name: 'tween-tween',
        meta: { title: "基础" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/tween/index.vue')
      },
      {
        path: 'example1',
        name: 'tween-example1',
        meta: { title: "更新Dom节点" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/tween/example1.vue')
      },
      {
        path: 'example2',
        name: 'tween-example2',
        meta: { title: "更新Dom节点(循环)" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/tween/example2.vue')
      },
      {
        path: 'example3',
        name: 'tween-example3',
        meta: { title: "无限的链式" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/tween/example3.vue')
      },
      {
        path: 'example4',
        name: 'tween-example4',
        meta: { title: "补间组" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/tween/example4.vue')
      },
      {
        path: 'example5',
        name: 'tween-example5',
        meta: { title: "缓动函数" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/tween/example5.vue')
      },
      {
        path: 'example6',
        name: 'tween-example6',
        meta: { title: "相对值" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/tween/example6.vue')
      },
      {
        path: 'example7',
        name: 'tween-example7',
        meta: { title: "补间值的数组" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/tween/example7.vue')
      },
    ]
  },
  {
    path: '/webgl',
    name: 'webGL',
    meta: { title: "webGL" },
    children: [
      {
        path: 'index',
        name: 'webGL-index',
        meta: { title: "绘制一个动态点" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/webgl/index.vue')
      },
      {
        path: 'demo1',
        name: 'webGL-demo1',
        meta: { title: "绘制一个动态点(缓冲区)" },
        component: () => import(/* webpackChunkName: "about" */ '@/views/webgl/demo1.vue')
      },
    ]
  },
  {
    path: '/worker',
    name: 'worker',
    meta: { title: "worker" },
    component: () => import(/* webpackChunkName: "about" */ '@/views/worker/index.vue')
  },
  {
    path: '/:pathMatch(.*)*',
    name: '404',
    meta: { title: "404", hidden: true },
    component: () => import(/* webpackChunkName: "about" */ '@/views/error/404.vue')
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export { routes };

export default router
